<template>
    <el-row class="f-main">
        <el-col>
            <el-row>
                <span class="copyright">© 2017 – <span class="copyrightYear">{{ curYear }}</span></span>
                <span id="animate" class="with-love"><i class="iconfont icon-heart"></i></span>
                <span class="author" itemprop="copyrightHolder">Mr.yong</span>
                <span class="post-meta-divider">|</span>
                <span class="post-meta-item-icon"><i class="iconfont icon-area-chart"> 站点字数合计:</i></span>
                <span title="站点总字数">19554</span>
                <span class="post-meta-divider">|</span>
                <span><i class="iconfont icon-beian"></i>
                        <a
                            href="https://beian.miit.gov.cn" 
                            rel="noopener"
                            target="_blank"> 粤ICP备18005467号
                    </a></span>

            </el-row>
        </el-col>
        <el-col class="run_time">
            <span id="timeDate">本站已安全运行 {{ timeDate }} 天 </span><span id="times">{{ times }}</span>
        </el-col>
        <el-col class="busuanzi-count">
            <span class="post-meta-item-icon"> <i class="iconfont icon-user"></i></span>
            <!-- <span class="site-uv" title="总访客量"><span class="busuanzi-value" id="busuanzi_value_site_uv">{{ips}}</span> 人</span> -->
            <span class="site-uv" title="总访客量"><span class="busuanzi-value">123213</span> 人</span>
            <span class="post-meta-divider">|</span>
            <span class="post-meta-item-icon"><i class="iconfont icon-eye"></i></span>
            <!-- <span class="site-pv" title="总访问量"><span class="busuanzi-value" id="busuanzi_value_site_pv">{{visitors}}</span> 次</span> -->
            <span class="site-pv" title="总访问量"><span class="busuanzi-value">11111</span> 次</span>
        </el-col>
    </el-row>
</template>
<script>
export default {
    name: 'FooterDom',
    data() {
        return {
            timeDate: 0,
            times: '00 小时 00 分 00 秒',
            curYear: 2020,
            ips: 0,
            visitors: 0,
            words: 0,
            beian: {
                url: 'https://beian.miit.gov.cn',
                number: '粤ICP备18005467号'
            },
        }
    },
    mounted() {
        this.curYear = (new Date()).getFullYear();
        this.runTime()
        this.timer()
        // _this.record()
        this.mouseEffects()
    },
    methods: {
        timer() {
            return setInterval(() => {
                this.runTime()
            }, 500)
        },
        destroyed() {
            clearInterval(this.timer)
        },
        runTime() {
            const now = new Date()
            const grt = new Date("12/01/2017 00:00:00");
            now.setTime(now.getTime() + 250);
            const days = (now - grt) / 1000 / 60 / 60 / 24;
            const dnum = Math.floor(days);
            const hours = (now - grt) / 1000 / 60 / 60 - (24 * dnum);
            let hnum = Math.floor(hours);

            if (String(hnum).length === 1) {
                hnum = "0" + hnum;
            }
            const minutes = (now - grt) / 1000 / 60 - (24 * 60 * dnum) - (60 * hnum);
            let mnum = Math.floor(minutes);
            if (String(mnum).length === 1) {
                mnum = "0" + mnum;
            }
            const seconds = (now - grt) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
            let snum = Math.round(seconds);
            if (String(snum).length === 1) {
                snum = "0" + snum;
            }
            this.timeDate = dnum;
            this.times = hnum + " 小时 " + mnum + " 分 " + snum + " 秒"
        },
        mouseEffects() {
            let aidx = 0;
            $(document).ready(function ($) {
                $("body").click(function (e) {
                    const a = ["❤富强❤", "❤民主❤", "❤文明❤", "❤和谐❤", "❤自由❤", "❤平等❤", "❤公正❤", "❤法治❤", "❤爱国❤", "❤敬业❤", "❤诚信❤", "❤友善❤"];
                    const $i = $("<span></span>").text(a[aidx]);
                    aidx = (aidx + 1) % a.length;
                    const x = e.pageX;
                    const y = e.pageY;
                    $i.css({
                        "z-index": 9999999,
                        "top": y - 20,
                        "left": x,
                        "font-size": "12px",
                        "position": "absolute",
                        "font-weight": "bold",
                        "color": "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")"
                    });
                    $("body").append($i);
                    $i.animate({ "top": y - 180, "opacity": 0 }, 1500, function () { $i.remove(); });
                });
            });
        }
    }
}
</script>
<style>
@keyframes iconAnimate {

    0%,
    100% {
        transform: scale(1)
    }

    10%,
    30% {
        transform: scale(0.9)
    }

    20%,
    40%,
    60%,
    80% {
        transform: scale(1.1)
    }

    50%,
    70% {
        transform: scale(1.1)
    }

}
</style>
<style lang="less" scoped>
.f-main {
    width: 70%;
    font-size: 14px;
    display: inline-block;
    z-index: 2;

    .el-col {
        padding: 5px;

        .with-love {
            color: #f00;
            padding: 0 3px;
            animation: iconAnimate 1.33s ease-in-out infinite;
            display: inline-block;
        }

        .post-meta-divider {
            padding: 0 5px;
        }

        .icon-beian {
            color: #0649d0;
        }

    }
}
</style>